<template>
	<view class="outsize">
		<view class="outsizeUp">
			<u-rate :count="count" active-color="#FFB200" v-model="value" :minCount="1"></u-rate>
			<view style="width: 100%;text-align: center;" v-show="value==1">
				非常糟糕
			</view>
			<view style="width: 100%;text-align: center;" v-show="value==2">
				糟糕
			</view>
			<view style="width: 100%;text-align: center;" v-show="value==3">
				一般
			</view>
			<view style="width: 100%;text-align: center;" v-show="value==4">
				很好
			</view>
			<view style="width: 100%;text-align: center;" v-show="value==5">
				非常好
			</view>
		</view>
		<view style="margin-top: 8px;">
			<u-textarea v-model="describe" border='none' placeholder="您的看房体验如何，请描述一下" count height="100px"></u-textarea>
		</view>
		<view style="margin-top: 10px;background-color: #ffffff;padding: 10px;">
			<view>
				<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="1"
					multiple></u-upload>
			</view>
		</view>
		<view class="">
			<button @tap="submit" style="margin-top: 100px;background-color:#FFDA00 ;font-size: 15px;">提交评论</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		post
	} from '@/serve/method.js'
	import {
		urlHead
	} from "@/serve/serve.js" // 全局配置文件
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad((option) => {
		userId.value = option.userId
		houseId.value = option.house
	})
	const userId = ref()
	const houseId = ref()
	const submit = () => {
		let images = []
		images = fileList2.value.map((item) => {
			return {
				"imgUrl": item.url, //图片地址
				"imageSize": item.size //图片大小
			}
		})
		let urls = '/api/appraise/add'
		post(urls, {
			"houseId": houseId.value, //房源ID
			"userId": userId.value, //用户ID
			"overallScore": value.value, //综合评分 只能传数字类型1-5到后端
			"appraise": describe.value, //评价
			'imageList': images
		}).then((res) => {
			if (res.msg == "新增成功") {
				uni.showModal({
					title: '提示',
					content: '感谢您的宝贵意见',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				});
			}
		})
	}
	const describe = ref()
	const count = ref(5);
	const value = ref(3)
	// 图片
	const action = ref(urlHead + '/common/upload')
	const fileList2 = ref([])
	const deletePic2 = (event) => {
		fileList2.value.splice(event.index, 1);
	}
	const afterRead2 = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList2.value.length;
		lists.map((item) => {
			fileList2.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			console.log(lists[i].url, 7777)
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList2.value[fileListLen];
			fileList2.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
			// tableContent.idVersoUrl = fileList2.value[0].url
			console.log(fileList2.value, '图片总')
		}
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: action.value,
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					console.log(JSON.parse(res.data).url, '图片')
					setTimeout(() => {
						resolve(JSON.parse(res.data).url);
					}, 1000);
				},
			});
		});
	}
</script>

<style scoped lang="scss">
	.outsize {
		width: calc(100vw - 16px);
		padding: 8px;
		height: calc(100vh - 16px);
		background-color: #F2F2F2;

		.outsizeUp {
			width: 100%;
			height: 90px;
			background-color: #ffffff;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap
		}
	}
</style>